<template>
	<view class="detail">
		<text style="font-size: 20px;">标题：{{news.title}}</text>
		<image :src="'http://124.93.196.45:10001'+news.cover" style="width: 100%;"></image>
		<rich-text :nodes="news.content"></rich-text>
		<text style="font-size: 28px;">推荐新闻</text>
		<view class="t1"  @click="tonewsdetail(tuijian)">
			<image :src="'http://124.93.196.45:10001'+tuijian.cover"></image>
			<text style="font-size: 15px;">{{tuijian.title}}</text>
			<view class="t2">
				<text>{{tuijian.content}}</text>
			</view>
			<view class="t3">
				<text>评论：{{tuijian.commentNum}}</text>
				<text>发布时间：{{tuijian.publishDate}}</text>
			</view>
		</view>
		<text style="font-size: 30px; color: red;">评论列表</text>
		<view class="p1">
			<textarea placeholder="请输入内容" v-model="content"></textarea>
			<u-button text="发表评论" color="#ccc" style="margin-top: 10px;" @click="addcomments"></u-button>
		</view>
		<u-button type="error" text="查看评论" style="width: 100px; float: right; margin-right: 20px;" @click="chakan"></u-button>
		<view class="p2" v-show="key">
			<text style="font-size: 26px; color: red;">评论内容:</text>
			<view class="p3">
				<text>评论条数：{{total}}</text>
			</view>
			<u-button type="primary" text="展开" @click="zhankai" v-show="key3"></u-button>
		</view>
		<view class="p4" v-if="key2">
			<view class="p5" v-for="item in commentlist" :key="item.id">
				<u-line></u-line>
				<view class="p6">
					<text>{{item.content}}</text>
				</view>
				<u-line></u-line>
			</view>
			<u-button type="error" text="收起" @click="shouqi"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				news:{},
				tuijian:{},
				content:'',
				commentlist:[],
				total:0,
				key:false,
				key2:false,
				key3:true,
				title:''
			}
		},
		onLoad(options) {
			this.id=options.id
			
			this.getnewsdetail()
			this.gettuijian()
			this.getcomment()
		},
		methods: {
			getnewsdetail(){
				this.api.get('/prod-api/press/press/'+this.id).then(res=>{
					this.news=res.data.data
					this.title=res.data.data.title
					uni.setNavigationBarTitle({
						title:this.title
					})
				})
			},
			gettuijian(){
				this.api.get('/prod-api/press/press/8').then(res=>{
					this.tuijian=res.data.data
				})
			},
			tonewsdetail(item){
				uni.navigateTo({
					url:'/pages/newsdetail/newsdetail?id='+item.id+'&title='+item.title
				})
			},
			getcomment(){
				this.api.get('/prod-api/press/comments/list?newsId='+this.id).then(res=>{
					console.log(res.data.total)
					this.total=res.data.total
					this.commentlist=res.data.rows
				})
			},
			chakan(){
				this.key=true
			},
			zhankai(){
				this.key2=true
				this.key3=false
			},
			shouqi(){
				this.key2=false
				this.key3=true
			},
			addcomments(){
				if(this.content===''){
					uni.showToast({
						title:'内容为空',
						icon:'error'
					})
					return
				}else{
					const comment={
						content:this.content,
						newsId:this.id
					}
					this.api.get('/prod-api/press/pressComment','POST',comment).then(res=>{
						if(res.data.code===200){
							setTimeout(function(){
								uni.showToast({
									title:'评论成功'
								})
							},700)
							this.content=''
						}else{
							uni.showToast({
								title:'发表失败',
								icon:'error'
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.t1{
	line-height: 25px;
	image{
		width: 100%;
	}
	.t2{
		margin-top: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.t3{
		margin-bottom: 10px;
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
	}
}
.p1{
	display: flex;
	flex-direction: column;
	width: 295px;
	height: 150px;
	border: 2px solid #ccc;
	margin: 10px auto;
}
.p2{
	margin-top: 35px
}
.p3{
	// margin-left: -200px;
	margin-right: 30px;
	text-align: right;
	font-size: 20px;
}
.p6{
	margin-top: 15px;
	margin-bottom: 15px;
}
</style>
